<template>
	<!-- 蓝领 -->
	<view class="bigbox">
		<!-- 宫格导航 -->
		<u-grid :col="5" :border="false">
			<u-grid-item class="mb44" @tap="$jump('/pages/home/BlueCollar/jobList/jobList?type=2&tit='+item.name+'&id='+item.id)"
				v-for="(item,index) in menu" :key="index" bg-color='#F9F9F9'>
				<image :src="item.image" class="w94 h94"></image>
				<view class="grid-text">{{item.name}}</view>
			</u-grid-item>
		</u-grid>

		<!-- 主体 -->
		<view class="banner pb50">
			<!-- banner头部 -->
			<view class="bannertit flex col-center h40">
				<image src="/static/img/index/3liepin-hot.png" class="w52 h62 mt20 mr20"></image>
				<text class="tit">热门推荐</text>
			</view>
			<!-- /banner头部 -->

			<!-- 职位列表 -->
			<u-empty text="暂无热门推荐" marginTop="100" v-if="!list.length"></u-empty>
			<view class="" v-for="(item,index) in list" :key="index">
				<blueJobList :data="item" />
			</view>
			<!-- 职位列表 -->
		</view>
		<!-- /主体 -->
	</view>
</template>

<script>
	import blueJobList from '@/components/blueJobList.vue'
	export default {
		components: {
			blueJobList
		},
		data() {
			return {
				menu: [],
				list: [], //蓝领热门推荐
				page: 1,
				name: '',
				//从哪跳转的
				from:'blue'
			};
		},
		onLoad(e) {
			console.log(e)
		},
		onShow() {
			this.indexCategory()//蓝领分类
			this.collarHot() //蓝领热门推荐
		},
		methods: {
			indexCategory() {//蓝领分类
				this.$api.indexCategory().then(res => {
					this.menu = res.data
				})
			},
			collarHot() { //蓝领热门推荐
				let data = {
					name: this.name,
					page: 1,
					size: this.page * 10
				}
				this.$api.collarHot(data).then(res => {
					this.list = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}
</style>
